<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { requestSynthesizeSearchResult } from '../../../utils/axiosURL'
import useSearchHistory from '../../../store/searchHistory';

// 请求的关键字
const { keyword_Store } = storeToRefs(useSearchHistory())
// 存储歌词数据
let saveLyricsData = ref<any>([])
// 歌词数据总数
let lyricCount = ref<number>(0)
// 存储数据下标
let lyricsIndex = ref<any | number>(null)
// 请求专辑所有评论的页码
let allCommentPage = ref<any>(1)
onMounted(() => requestSynthesizeSearchResultFn())
// 请求歌词
const requestSynthesizeSearchResultFn = () => {
    requestSynthesizeSearchResult(keyword_Store.value, 1006, 20, allCommentPage.value).then((data: any) => {
        saveLyricsData.value = data.result.songs
        lyricCount.value = data.result.songCount
    }).catch(_ => { })
}
// 控制歌词容器高度的事件处理函数
const changeHeightAutoFn = (index: number) => lyricsIndex.value = index
const changePages = () => requestSynthesizeSearchResultFn()


</script>


<template>
    <div class="lyricsWrap">
        <div class="lyricsTable">
            <div class="lyrics_header">
                <div class="songTitleMusic">音乐标题</div>
                <div class="singer">歌手</div>
                <div class="album">专辑</div>
                <div class="time">时长</div>
                <div class="hot">热度</div>
            </div>
            <div class="lyrics_body" v-for="(item, index) in saveLyricsData" v-if="saveLyricsData.length !== 0">
                <div class="songInfo">
                    <div class="songTitleMusic">
                        <div class="moreFun">
                            <span class="">{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</span>
                                    <span class="iconfont icon-xihuan"></span>
                                    <span class="iconfont icon-xiazai"></span>
                        </div>
                        <div class="songName">{{ item.name }}</div>
                    </div>
                    <div class="singerWrap">
                        <div class="singerNameChild">{{ item.ar[0].name }}</div>
                    </div>
                    <div class="album">
                        <div class="albumWrap">{{ item.al.name }}</div>
                    </div>
                    <div class="time">
                        <SongTime :songDuration=item.dt />
                    </div>
                    <div class="hot">
                        <div class="hotItem">
                            <div class="deepHotItem" :style="{ width: `${item.pop}%` }"></div>
                        </div>
                    </div>
                </div>
                <div class="lyric">
                    <div class="lyricsItem" :class="lyricsIndex === index ? 'HeightAuto' : ''">
                        <p v-for="lyric_item in item.lyrics" class="lyric_item">{{ lyric_item }}</p>
                    </div>
                    <div class="rightBtn">
                        <div class="showAll" v-if="!(lyricsIndex === index)" @click="changeHeightAutoFn(index)">展开全部</div>
                        <div class="showAll" v-else @click="() => lyricsIndex = null">收起全部</div>
                        <div class="copyAll">复制全部</div>
                    </div>
                </div>
            </div>
            <el-skeleton v-else :row="6" v-for="item in 10"/>
        </div>
        <div class="paging">
            <el-pagination small background layout="prev, pager, next" :total="lyricCount"
                v-model:current-page="allCommentPage" @current-change="changePages" />
        </div>
    </div>
</template>


<style lang="scss" scoped>
.lyricsWrap {
    width: 100%;

    .lyricsTable {
        width: 100%;

        .lyrics_header {
            display: flex;
            align-items: center;
            line-height: 30px;
            width: 100%;


            >div {
                font-size: $font-size-sm;
                font-family: $activeTextFont;
                color: $font_second_color;
                font-weight: normal;
                text-align: left;
            }

            .songTitleMusic {
                width: 40%;
                padding-left: 80px;
                box-sizing: border-box;
            }

            .singer {
                width: 20%;
            }

            .album {
                width: 15%;
            }

            .time {
                width: 10%;
            }

            .hot {
                width: 15%;
            }

        }

        .lyrics_body {
            width: 100%;

            .songInfo {
                display: flex;
                align-items: center;

                >div {
                    font-size: $font-size-sm;
                    font-family: $activeTextFont;
                    color: $font_second_color;
                    font-weight: normal;
                    text-align: left;
                    line-height: 40px;
                }

                .songTitleMusic {
                    display: flex;
                    width: 40%;

                    .moreFun {
                        flex-basis: 80px;
                        display: flex;
                        justify-content: space-around;
                        width: 80px;
                    }

                    .songName {
                        flex: 1;
                        max-width: 80%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }

                .singerWrap {
                    width: 20%;

                    .singerNameChild {
                        width: 158px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }

                .album {
                    width: 15%;

                    .albumWrap {
                        width: 119px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }

                .time {
                    width: 10%;
                }

                .hot {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 15%;

                    .hotItem {
                        width: 70%;
                        height: 8px;
                        border-radius: 25px;
                        background-color: rgb(218, 218, 219);

                        .deepHotItem {
                            width: 60%;
                            height: 100%;
                            border-radius: 25px;
                            background-color: rgb(196, 196, 197);
                        }
                    }
                }
            }

            .lyric {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                padding-left: 90px;
                box-sizing: border-box;

                .lyricsItem {
                    flex: 200px;
                    width: 200px;
                    height: 120px;
                    min-height: 120px;
                    overflow: hidden;

                    .lyric_item {
                        font-size: $font-size-sm;
                        font-family: $activeTextFont;
                        color: $font_second_color;
                        line-height: 20px;
                    }
                }

                .HeightAuto {
                    height: auto;
                }

                .rightBtn {
                    display: flex;
                    flex: 1;
                    height: 120px;

                    .showAll,
                    .copyAll {
                        width: fit-content;
                        height: fit-content;
                        padding: 5px 10px 3px;
                        border-radius: 25px;
                        border: 1px solid $lineColor;
                        font-size: $font-size-xs;
                        font-family: $activeTextFont;
                        color: $font_main_color;
                        margin-right: 10px;

                        &:hover {
                            background-color: rgb(230, 230, 231);
                        }
                    }
                }
            }

            &:nth-child(even) {
                background-color: rgb(250, 250, 250);
            }

            &:hover {
                background-color: rgb(242, 242, 243);
            }
        }
    }

    .paging {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;

        :deep(.number) {
            border-radius: 4px;
            font-family: none;
            font-family: $textFont;
            background-color: transparent;
            border: 1px solid $lineColor;

            &:hover {
                color: $font_main_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.is-active) {
            background-color: $theme-red !important;
            border-radius: 4px;

            &:hover {
                color: $theme-white;
                background-color: $theme-red;
            }
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.more) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }
    }
}
</style>